<template>
    <a-drawer popup-container="#wrap" width="500px" :visible="show" :ok-loading="form.loading" @ok="submit" @cancel="show = false" unmountOnClose>
        <template #title>
            {{$t('components.groupCreate.60zecwmcogw1')}}
        </template>
        <div class="table-info">
            <a-form ref="formRef" :model="form.data" @submit="submit" layout="vertical">
                <a-form-item field="name" :label="$t('components.groupCreate.60zecwmdtv80')" :rules="[{ required: true, message: $t('components.groupCreate.60zecwmdv680') }]">
                    <a-input v-model="form.data.name" :placeholder="$t('components.groupCreate.60zecwmdv680')" />
                </a-form-item>
            </a-form>
        </div>
    </a-drawer>
</template>

<script lang='ts' setup>
import { defineModel } from 'vue'
import { apiDeviceGroupUpdate } from '@/api/device'
const detail:any = defineModel('data',{ default:{} })
const local = useLocal()
const show = defineModel('show', { default: false })
const formRef = ref()
const emit = defineEmits(['refresh'])
const form = reactive({
    data: {
        name: '',
        id: 0,
        uid: local.usermsg.id == 3 ? 0 : local.usermsg.id
    },
    point:{
        list:[] as any,
        loading:false
    },
    loading: false,
})
const submit = async () => {
    const validate= await formRef.value?.validate()
    if(validate) return;
    form.loading = true
    const { code } = await apiDeviceGroupUpdate({
        ...form.data,
    })
    form.loading = false
    if (code != 200) return;
    emit('refresh')
    formRef.value?.resetFields()
    show.value = false
}
useWatch(show,(val:any)=>{
    if(val){
        form.data = {
            ...useField.include(detail.value,['id','name']),
        }
        
    }else{
        formRef.value?.resetFields()
    }
})
</script>

<style scoped></style>